<template>
	<view>
		<view class="bg-white solid-top rowsb align-center padding" v-for="(item,index) in addressData" @click="$tools.Router('/pages/address/address')">
			<view class="margin-right align-center">
				<image src="../../../static/dingwei.png" mode="" class="" style="width: 30rpx;height: 30rpx;"></image>
				<view class="margin-left">
					<view>
						<text>{{orderData.address.name}}</text>
						<text class="text-gray margin-left">{{orderData.address.tel}}</text>
					</view>
					<view class="towlineshow">
						{{orderData.address.sca_name}}{{orderData.address.address}}
					</view>
				</view>
			</view>
			<view class="margin-left">
				<view class="arrow"></view>
			</view>
		</view>
		<view class=" bg-white margin-top-sm radius margin-sm">
			<view class="padding solid-bottom rowsb">
				<text>商品详情</text>
				<text class="text-gray">{{orderData.orderno}}</text>
			</view>
			<view class="margin-sm padding-bottom-sm rows" v-for="(item,index) in orderData.good_list ">
				<view class="margin-right">
					<image :src="image+item.img" mode="" class="bg-gray radius" style="height: 150rpx;width: 150rpx;"></image>
				</view>
				<view>
					<view>{{item.title}}</view>
					<view class="flex ">
						<view class="bg-gray margin-top-sm text-sm" style="padding: 3rpx 10rpx;border-radius: 5rpx;">
							{{item.spec}}
						</view>
					</view>
					<view class=" rowsb margin-top-sm align-center" style="width: 200rpx;">
						<view>￥{{item.price}} </view>
						<view>X{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<view class="bg-white margin-top-sm margin-sm padding-sm radius ">
			<view class="rowsb align-center">
				<view>
					<view>
						驾校地址
					</view>
					<view class="rowsb align-center margin-top-sm">
						<view class="rows">
							<view class="margin-right">
								<image src="" mode="" class="bg-gray" style="width: 30rpx;height: 30rpx;"></image>
							</view>
							<view class="onelineshow">
								山东省济南市海尔时代大厦1706室
							</view>
						</view>
					</view>
				</view>
				<view class="margin-right">
					<image src="" mode="" class="bg-gray" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
		</view> -->
		<view class="bg-white  margin-sm radius">
			<view class="rowsb solid-bottom padding padding-bottom">
				<text>商品金额</text>
				<text class="text-gray">￥{{orderData.amount}}</text>
			</view>
			<view class="bg-white rows  padding-sm">
				<view class="margin-right" v-if="status !='1'">
					退款原因
				</view>
				<view class="margin-right" v-else>
					备注
				</view>
				<view>
					<textarea value="" placeholder="请输入" class="border" style="height: 200rpx;width: 500rpx;" v-model="constInfo" />
					</view>
				</view>
			</view>
			<view style="height: 130rpx;">
				
			</view>
			<view class="padding-sm bg-white rowsb align-center" style="position: fixed; z-index: 1;left: 0;right: 0;bottom: 0;">
				<view style="color: #DF1414;">
					应支付：￥{{orderData.amount}}
				</view>
				<view class="rows" v-if="status=='1'">
					<view @click="cancelOrder(orderData.id)" 
					 style="border: 1rpx solid #DF1414;color:#DF1414 ;width: 130rpx;text-align: center;" class=" padding-tb-sm padding-lr-lg radius margin-right">
						取消订单
					</view>
					<view style="background: #DF1414;width: 130rpx; text-align: center;" class="text-white padding-tb-sm padding-lr-lg radius" @click="orderPay">
						去支付
					</view>
				</view>
				<view class="rows" v-else>
					<view @click="refund()" 
					<view style="background: #DF1414;width: 130rpx; text-align: center;" class="text-white padding-tb-sm padding-lr-lg radius">
						申请退款
					</view>
				</view>
			</view>
			<view class="warp align-center rowsc" v-if="orderSet">
				<view class="margin-xl padding bg-gray radius" style="background-color: #FFFFFF;width: 70%;">
					<view class="text-center  padding-bottom border-bottom">
						<view class="text-bold">
							温馨提示
						</view>
						<view class="text-gray margin-top">确定删除该订单吗？</view>
					</view>
					<view class="flex justify-around text-xl margin-top">
						<view class="solid-right" @click="orderSet=false">
							取消
						</view>
						<view class="" style="color: #007AFF;" @click="submitOrderDetail()">确定</view>
					</view>
				</view>
			</view>
			
	</view>
</template>

<script>
	const app = getApp().globalData
	import {getOrderInfo,stateOrder,afterSale} from '../../../common/path.js'
	export default{
		data(){
			return{
				detailId:'',
				orderData:[],
				addressData:[],
				orderSet:false,
				constInfo:'',//退款原因
				status:'',
				image:'',//拼接
			}
		},
		onLoad(option) {
			console.log('获取到的订单id=====>',option.id)
			this.detailId = option.id
			this.status = option.status
			this.getOrderInfo(option.id)
			this.image = app.image
		},
		methods:{
			//orderPay订单支付
			orderPay(){
				this.$tools.showToast('暂不')
			},
			
			
			//申请退款
			refund(){
				let data = {
					order_id:this.detailId,
					user_id:app.userInfo.id,
					info:this.constInfo,
					img:''
				}
				this.$axios.axios('POST',afterSale,data)
				.then(res=>{
					console.log(res)
				})
				.catch(err=>{
					console.log(err)
				})
			},
			//取消订单
			cancelOrder(id){
				this.cancelOrderId = id
				this.orderSet = true
				console.log('当前订单id========>',this.cancelOrderId)
			},
			submitOrderDetail() {
				this.orderSet = false
				let data = {
					order_id: this.cancelOrderId,
					user_id: app.userInfo.id,
					status: 9 + ''
				}
				this.$axios.axios("POST", stateOrder, data)
					.then(res => {
							setTimeout(res=>{
								this.$tools.navigateBack()
							},1000)
							this.$tools.showToast('取消成功')
							console.log('取消是否成功===>',res)
					})
					.catch(err => {
						console.log(err)
					})
			},
			getOrderInfo(id){
				let data ={
					order_id:id,
					user_id:app.userInfo.id
				}
				this.$axios.axios('POST',getOrderInfo,data)
				.then(res=>{
					console.log('获取到的确认订单信息====>',res.data);
					if(res.status==1){
						this.orderData = res.data
						this.addressData.push(res.data.address)
					console.log('订单的地址====>',this.addressData);
					}else{
						this.$tools.showToast('网络异常')
					}
				})
				.catch(err=>{
					console.log(err)
				})
				
			}
		}
	}
</script>

<style>
</style>
